import React from 'react'
import {Row, Card} from 'antd'
import echarts from 'echarts'
import ReactEcharts from 'echarts-for-react';

//echart主题
import themeLight from '../themeLight'
import echartTheme from '../echartTheme'

// 引入饼图和折线图
import 'echarts/lib/chart/pie'

// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';


export default class Line extends React.Component {

  state = {}

  componentWillMount() {
    echarts.registerTheme('Imooc', echartTheme);
  }

  getOption() {
    let option = {
      title: {
        text: '用户骑行订单'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单量',
          type: 'line',
          data: [
            1000,
            2000,
            1500,
            3000,
            2000,
            1200,
            800
          ]
        }
      ]
    }
    return option;
  }

  getOption2() {
    let option = {
      title: {
        text: '用户骑行订单'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['OFO订单量', '摩拜订单量']
      },
      xAxis: {
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'OFO订单量',
          type: 'line',
          stack: '总量',
          data: [
            1200,
            3000,
            4500,
            6000,
            8000,
            12000,
            20000
          ]
        },
        {
          name: '摩拜订单量',
          type: 'line',
          stack: '总量',
          data: [
            1000,
            2000,
            5500,
            6000,
            8000,
            10000,
            12000
          ]
        },
      ]
    }
    return option;
  }

  getOption3() {
    let option = {
      title: {
        text: '用户骑行订单'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单量',
          type: 'line',
          data: [
            1000,
            2000,
            1500,
            3000,
            2000,
            1200,
            800
          ],
          areaStyle: {}
        }
      ]
    }
    return option;
  }

  render() {
    return (
      <Row type="flex" justify="space-around" align="middle" gutter={32}>
        <Card title="折线图表之一" style={{width: "30%"}}>
          <ReactEcharts
            option={this.getOption()}
            theme="Imooc"
            notMerge={true}
            lazyUpdate={true}
            style={{
              height: 500
            }}/>
        </Card>
        <Card title="折线图表之二" style={{width: "30%"}}>
          <ReactEcharts
            option={this.getOption2()}
            theme="Imooc"
            notMerge={true}
            lazyUpdate={true}
            style={{
              height: 500
            }}/>
        </Card>
        <Card title="折线图表之三" style={{width: "30%"}}>
          <ReactEcharts
            option={this.getOption3()}
            theme="Imooc"
            notMerge={true}
            lazyUpdate={true}
            style={{
              height: 500
            }}/>
        </Card>
      </Row>
    );
  }
}
